<template>
  <div class="news" v-if="news_data && news_data.length != 0">
    <!-- 左面图片  右面通知-->
    <van-row>
      <van-col span="6">
        <div class="news_img_div">
          <img :src="getImgPath + 'img/icon/home_icon7.png'">
        </div>
      </van-col>
      <van-col span="18">
        <van-notice-bar :scrollable="false" color="#000" background="#FFF">
          <van-swipe
            vertical
            class="notice-swipe"
            :autoplay="3000"
            :show-indicators="false"
          >
          <!-- 值得看 内容部分 -->
            <van-swipe-item v-for="(item,index) of news_data" :key="index">
              <van-row>
                <!-- 文本部分 -->
                <van-col :span="19" class="news_font">{{item.count}}</van-col>
                <van-col :span="4" class="news_img">
                  <div class="img" :style="{backgroundImage:'url('+getImgPath + item.img_path+')'}"></div>
                </van-col>
                <!-- 留一个右间距 -->
              </van-row>
            </van-swipe-item>

          </van-swipe>
      </van-notice-bar>
      </van-col>
    </van-row>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
export default {
  name:"News",
  props:["news_data"],
  data() {
    return {
      
    }
  },
  computed: {
    ...mapGetters("ImgPath",{
      getImgPath:"getImgPath"
    })
  },
}
</script>
<style lang="less" scoped>
  .news{
    display: flex;
    align-items: center;
    margin-top: 0.06rem;
    width: 100%;
    height: 0.5rem;
    background-color: #ffffff;
    .van-row{
      display: flex;
      align-items: center;
      flex: 1;
    }
  }
  .news_img_div{
    display: flex;
    align-items: center;
    width: 0.615rem;
    margin: 0 auto;
    img{
      width: 100%;
    }
  }
  .van-notice-bar{
    padding: 0rem;
    /deep/ .van-notice-bar__content{
      width: 100%;
    }
  }
  .notice-swipe {
    height: 0.4rem;
    line-height: 0.4rem;
    .van-swipe-item{
      width: 100%;
      .news_item_img_div{
        position: relative;
        left:  0.1rem;
        background-color: red;
      }
      span{
        font-size: 0.13rem;
      }
     
    }
  }

  .news_font{
    font-size: 0.133rem;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .news_img{
    width: 0.5rem;
    height: 0.37rem;
    .img{
      display: inline-block;
      width: 100%;
      height: 100%;
      background-color: #999999;
      overflow: hidden;
      background-size: 100%;
      background-position: center center;
    }
  }
</style>